<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .wheel{
       position: relative;
       width: 600px;
       height: 600px;
       border-radius: 50%;
       border: 30px solid  #282c34;
       animation: roll 10s linear infinite;
    }
    @keyframes roll {
        0%{transform: rotate(0deg)}
        100%{transform: rotate(360deg)}
    }
    @keyframes boxRoll {
        0%{transform: rotate(0deg)}
        100%{transform: rotate(-360deg)}
    }
    .commonbox{
        width: 100px;
        height: 100px;
        background-color: #EC6149;
        transform-origin:top center;
        animation: boxRoll 10s linear infinite;
    }
    .wheel .one{
    position: absolute;
	top: -24px;
    left: 300px;
    margin-left: -50px;
   
    }
    .wheel .two{
    position: absolute;
	top: 160px;
    left: -30px;
    
    }
    .wheel .three{
    position: absolute;
	top:400px;
    left: -40px;
  
    }
    .wheel .four{
    position: absolute;
	bottom: -100px;
    left: 300px;
    margin-left: -50px;
   
    }
    .wheel .five{
    position: absolute;
	top: 400px;
   right: -40px;
   
    }
    .wheel .six{
    position: absolute;
	top: 160px;
   right: -40px;
   
    }
</style>
<body>
    <div class="wheel">
        <div class="commonbox one"></div>
        <div class="commonbox two"></div>
        <div class="commonbox three"></div>
        <div class="commonbox four"></div>
        <div class="commonbox five"></div>
        <div class="commonbox six"></div>
    </div>
</body>
</html>